<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04.模拟百度搜索</title>
    <script src="js/tools.js"></script>
</head>

<body>
    <input type="text" id="searchNode">
    <ul id="ulNode">
  
    </ul>
    <script>
        /**
         * https://www.baidu.com/sugrec?prod=pc_hao123&wd=web
         * callback=jQuery110106495375278251105_1702964433198&
         */
        searchNode.onkeyup = function () {
            var value = this.value;
            $$.myAjax({
                url: "https://www.baidu.com/sugrec",
                data: {
                    prod: "pc_hao123",
                    wd: value
                },
                dataType: "jsonp",
                success: function (data) {
                    console.log(data.g);
                    var dataArray = data.g;
                    ulNode.innerHTML = ""
                    dataArray.forEach(function(element) {
                        var v = element.q;
                        var liNode = document.createElement("li");
                        liNode.innerText = v;
                        ulNode.appendChild(liNode)
                    });                   
                }
            })
        }
    </script>

</body>

</html>